import React from 'react';

import { Carousel } from 'antd';
import Swiper from 'swiper';


class Home extends React.Component{
    constructor(props){
        super(props);
    }
    componentDidMount(){
         var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false
    });
    }
    render(){
        return(
            <div>
                 <div className="swiper-container">
                    <div className="swiper-wrapper">
                        <div className="swiper-slide"><img src={require("./static/images/lunbo1.png")}/></div>
                        <div className="swiper-slide"><img src={require("./static/images/lunbo2.png")}/></div>
                        <div className="swiper-slide"><img src={require("./static/images/lunbo3.png")}/></div>
                        <div className="swiper-slide"><img src={require("./static/images/lunbo4.png")}/></div>
                    </div>
       
                    <div className="swiper-pagination"></div>
                    <div className="swiper-button-next index-arrow"></div>
                    <div className="swiper-button-prev index-arrow"></div>
                </div>

                <div className="index-icon-list">
                    <div className="index-icon">
                        <img src={require("./static/images/icon.png")}/>
                        <p>通知公告</p>
                    </div>
                    <div className="index-icon">
                        <img src={require("./static/images/icon1.png")}/>
                        <p>贡献榜</p>
                    </div>
                    <div className="index-icon">
                        <img src={require("./static/images/icon2.png")}/>
                        <p>礼品兑换</p>
                    </div>
                </div>

                <div className="index-content">
                    <div className="index-content-display">
                        <h1>致谢</h1>
                        <p>截至目前，贡献最多的前 3  位白帽子是：</p>
                        <p className="contributor-list">
                            <span>x</span>、
                            <span>Graves</span>、
                            <span>4ck1k@Shadow7</span>。
                        </p>
                        <p className="contribution-gratitude">感谢他们对饿了么安全作出的贡献！</p>
                        <img src={require("./static/images/icon3.png")}/>
                    </div>
                    <div className="index-content-display">
                         <img src={require("./static/images/qcode.png")} className="qcode"/>
                        <p className="hello">欢迎关注 ESRC 微信公众号</p>
                        <img src={require("./static/images/icon4.png")} className="upload-button"/>
                        <img src={require("./static/images/icon5.png")} className="upload-button"/>
                    </div>
                </div>

            </div>
        )
    }
}


export default Home;